<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <date-pick-flexend
      type="daterange"
      :value="datetime"
      :options="datetimeOption"
      confirm
      split-panels
      placement="bottom-end"
      placeholder="请选择查询日期范围"
      size="small"
      style="width:196px;margin-left:8px" />
    {{datetime}}  -- {{typeof datetime}}
    <div class="">
      <i-mixcheck v-model="rangeAge">
        <i-radio-item label="NONE">不限</i-radio-item>
        <i-check-item label="[14,18]">14~18岁</i-check-item>
        <i-check-item label="[19,24]">19~24岁</i-check-item>
        <i-check-item label="[25,29]">25~29岁</i-check-item>
        <i-check-item label="[30,39]">30~39岁</i-check-item>
        <i-check-item label="[40,49]">40~49岁</i-check-item>
        <i-check-item label="[50,66]">50岁及以上</i-check-item>
        <i-radio-item label="CUSTOM">自定义</i-radio-item>
      </i-mixcheck>
      {{rangeAge}} - {{typeof rangeAge}}
    </div>

    <div class="">
      <i-input-number
        v-model="totalAmount"
        :max="5"
        :min="0.1"
        :step="0.1"
        :precision="2"
        :width="100"
        placeholder="请输入" />
      {{totalAmount}}{{typeof totalAmount}}
    </div>

    <i-row>
      <i-col span="12">
        c-col-12
        <i-row-form>
          <i-row-item prop="code" label="部门编码" required>
            <i-input v-model="dept.code" placeholder="请输入编码" />
          </i-row-item>
          <i-row-item prop="name" label="部门名称" required>
            <i-input v-model="dept.name" placeholder="请输入名称" />
          </i-row-item>
        </i-row-form>
      </i-col>
      <i-col span="12">
        c-col-12
        <i-nodata></i-nodata>
      </i-col>
    </i-row>

    <i-row>
      <i-col span="8">
        <i-dropdown trigger="click">
          <a href="javascript:void(0)">
              下拉菜单
              <i-icon type="ios-arrow-down"></i-icon>
          </a>
          <template #list>
              <ul>
                <li>驴打滚</li>
                <li>驴打滚</li>
                <li>驴打滚</li>
                <li>驴打滚</li>
                <li>驴打滚</li>
              </ul>
          </template>
        </i-dropdown>
      </i-col>
      <i-col span="8"></i-col>
      <i-col span="8"></i-col>
    </i-row>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import shortcuts from '@/data/shortcuts'
import { Utils } from '../../dist/datepick'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted () {
    this.$nextTick(() => {
      console.log(Utils)
      const account = 'admin' // 账号
      const name = '超级管理员' // 用户姓名
      this.$appendWaterMark(this.$el, `${account} ${decodeURIComponent(name)}`)
    })
  },
  data () {
    return {
      dept: {
        code: '004',
        name: '设计部'
      },
      totalAmount: '',
      rangeAge: [],
      datetime: ['2022-04-01', '2022-04-11'],
      datetimeOption: {
        shortcuts,
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
